<template>
	<view class="practice-content">
		<view class="notdata-box" v-if="(JSON.stringify(topicInfo)=='{}')">
			<image src="../../static/index/not-data.png" mode=""></image>
			<view>还没有数据咯</view>
		</view>
		<view class="practice-box" v-if="(JSON.stringify(topicInfo)!='{}')">
			<view class="topic-box">
				<view class="stem-box">
					<text
						class="stem-type">{{topicInfo.type == 1? '单选':(topicInfo.type == 2?'多选':(topicInfo.type == 3?'判断':''))}}</text>
					<text class="stem-text"> {{page + '.' + topicInfo.title}}</text>
					<text class="aloud-box" @click="playVoice">读题</text>
					<text class="aloud-box" @click="redoTopic">重做</text>
					<!-- <text class="aloud-box" @click="cancelCollect(topicInfo)">取消收藏</text> -->
				</view>
				<view v-if="topicInfo.full_image != null" class="">
					<image :src="topicInfo.full_image" mode=""></image>
				</view>
				<!-- 单选、判断 -->
				<view v-if="topicInfo.type == 1 || topicInfo.type == 3" class="stem-select">
					<view class="select-item" v-for="(item, index) in topicInfo.options" :key="index"
						@click="radioGroupChange(item)">
						<image :src="item.noSelect" mode=""></image>
						<view>{{item.option + '.' + item.content}}</view>
					</view>
				</view>
				<!-- 多选 -->
				<view v-if="topicInfo.type == 2" class="stem-select">
					<view class="select-item" v-for="(item, index) in topicInfo.options" :key="index"
						@click="checkGroupChange(item)">
						<image :src="item.noSelect" mode=""></image>
						<view>{{item.option + '.' + item.content}}</view>
					</view>
				</view>
				<view v-if="isError" class="answer-box">
					<text>正确答案</text>
					<text class="right">{{isCorrect}}</text>
					<text>您的选择</text>
					<text class="you-select">{{isSelect}}</text>
				</view>
			</view>

		</view>
		
		<view class="fun-box">
			<view class="explain">
				<view @click="showExplain(1)">技巧讲解</view>
				<view @click="showExplain(2)">官方解析</view>
			</view>
			<view class="funbox">
				<view class="fun-subbox">
					<view class="current-topic" @click="showPopup">
						<image src="../../static/index/menu.png" mode=""></image>
						<view>{{page}}/{{topicTotal.length}}</view>
					</view>
				</view>
				<view class="fun-subbox">
					<view class="up-topic" @click="backTopic">
						上一题
					</view>
					<view class="down-topic" @click="nextTopic">
						下一题
					</view>
				</view>
			</view>
		</view>
		<!-- 讲解弹窗 -->
		<u-popup v-model="isExplain" mode="center" width="70%" closeable border-radius="10">
			<!-- 科目1 -->
			<view v-if="topicInfo.type != 2" class="skill-explain">
				<view class="" v-if="showSkill">
					<view class="skill-title">
						技巧解析
					</view>
					<view class="skill-subtitle">
						<image src="../../static/index/tmjx.png" mode=""></image>
						<view>题目解析</view>
					</view>
					<view class="explain-box">
						{{topicInfo.parse}}
					</view>
				</view>
				<view class="" v-if="showAuth">
					<view class="skill-title">
						官方解析
					</view>
					<view class="skill-subtitle">
						<image src="../../static/index/tmjx.png" mode=""></image>
						<view>题目解析</view>
					</view>
					<view class="explain-box">
						{{topicInfo.official_parse}}
					</view>
				</view>
			</view>
			<!-- 科目四 -->
			<view v-if="topicInfo.type == 2" class="skill-explain">
				<view class="" v-if="showSkill">
					<view class="skill-title">
						技巧解析
					</view>
					<view class="skill-subtitle">
						<image src="../../static/index/tmjx.png" mode=""></image>
						<view>题目解析</view>
					</view>
					<view class="explain-box">
						{{topicInfo.parse}}
					</view>
				</view>
				<view class="" v-if="showAuth">
					<view class="skill-title">
						官方解析
					</view>
					<view class="skill-subtitle">
						<image src="../../static/index/tmjx.png" mode=""></image>
						<view>题目解析</view>
					</view>
					<view class="explain-box">
						{{topicInfo.official_parse}}
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="topicShow" mode="bottom" border-radius="30" height="900rpx">
			<view class="fun-box1">
				<view class="fun-subbox">
					<view class="current-topic" @click="showPopup">
						<image src="../../static/index/menu.png" mode=""></image>
						<view>{{page}}/{{topicTotal.length}}</view>
					</view>
				</view>
				<view class="fun-subbox">
					<view class="up">
						<image src="../../static/index/selected.png" mode=""></image>
						<view>{{correctTotal}}</view>
					</view>
					<view class="up">
						<image src="../../static/index/error.png" mode=""></image>
						<view>{{errorTotal}}</view>
					</view>
				</view>
			</view>
			<view class="topic-code">
				<!-- 2 correct正确   3 error错误  1 default默认  current当前  -->
				<view class="code-item"
					:class="page==(item.subIndex)?'current':(item.isErr == 1?'default':(item.isErr == 2?'correct':'error'))"
					v-for="(item,index) in topicTotal" @click="goTopic(index + 1)">
					{{index + 1}}
				</view>
			</view>
		</u-popup>
		<u-popup v-model="tipsShow" mode="center" border-radius="20" height="420rpx" width="600rpx">
			<view class="tips-box">
				<view class="tips-text">
					<image src="../../static/index/ts.png" mode=""></image>
					<view class="text">
						未付费学员（过客身份）有试用权限试用
					</view>
					<view class="num">
						试用<text>30</text>题
					</view>
				</view>
				<view class="btn-box">
					<view @click="tipsShow = false">暂不购买</view>
					<view class="green" @click="payCourse">购买课程</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		toast
	} from '../../utils/common.js';
	import {
		getAllwrong,
		getTypewrong,
		getAllCollection,
		getTypeCollection
	} from '../../api/user.js';
	import {
		getPurchasedCourses
	} from '@/api/index.js'
	export default {
		data() {
			return {
				topicShow: false,
				tipsShow: false,
				
				isExplain:false,
				showSkill:false,
				showAuth:false,
				correctImg: '/static/index/selected.png',
				errorImg: '/static/index/error.png',
				noSelect: '/static/index/select.png',
				totalImg: '/static/index/select.png',
				isSelect: '',
				isCorrect: '',
				isError: false,
				currentTag: 1,
				nowSelect: '',
				isDisable: false,
				isFirstClick: false,
				page: 1,
				limit: 1,
				topicTotal: [],
				correctTotal: 0,
				errorTotal: 0,
				topicInfo: {},
				topicType: 0, // 题目类型，1顺序练习 2专题练习 3章节练习 4三力测试 5精选500
				// staticId:0,//专题练习  章节练习 三力测试
				isrequest: true,
				// 购买课程是否
				isBuy: false,
				Audio: uni.createInnerAudioContext(),
				model:'',
				
				//
				subject:1,
			}
		},
		onLoad(options) {
			if(options.currentTag==4){
				this.subject=2
			}
			this.topicInfo = []
			// 全部错题
			if (options.type == 'undefined' && options.model == 'error') {
				this.topicType = options.type
				this.model = options.model
				this.getAllwrong()
			}
			// 错题类型
			if (options.type != 'undefined' && options.model == 'error') {
				console.log(8888,options);
				this.topicType = options.type
				this.model = options.model
				this.getTypewrong(options.type)
			}
			// 全部收藏
			if (options.type == 'undefined' && options.model == 'collection') {
				this.topicType = options.type
				this.model = options.model
				this.getAllCollection()
			}
			// 收藏类型
			if (options.type != 'undefined' && options.model == 'collection') {
				this.topicType = options.type
				this.model = options.model
				this.getTypeCollection(options.type)
			}
		},
		watch: {
			topicInfo: {
				handler(val, old) {
					this.topicInfo = val;
					// console.log(val);
				},
				deep: true
			},
			page: {
				handler(val, oldVal) {
					if(val !== oldVal && this.topicType == 'undefined' && this.model == 'error'){
						this.getAllwrong()
					}
					if(val !== oldVal && this.topicType != 'undefined' && this.model == 'error'){
						this.getTypewrong(this.topicType)
					}
					if(val !== oldVal && this.topicType == 'undefined' && this.model == 'collection'){
						this.getAllCollection()
					}
					if(val !== oldVal && this.topicType != 'undefined' && this.model == 'collection'){
						this.getTypeCollection(this.topicType)
					}
				},
				deep: true
			},
		},
		mounted() {
			// this.getPurchasedCourse()
		},
		methods: {
			showExplain(type){
				this.isExplain = true
				if(type == 1){
					this.showSkill = true
					this.showAuth = false
				}
				if(type == 2){
					this.showAuth = true
					this.showSkill = false
				}
			},
			// 查询是否购买课程
			getPurchasedCourse() {
				let that = this
				getPurchasedCourses({subject:this.subject}).then(res => {
					if (res.data.data.length > 0) {
						that.isBuy = true
					} else {
						that.isBuy = false
					}
				})
			},
			showPopup() {
				uni.showLoading({
					title: '加载中...'
				});
				this.topicShow = true;
				setTimeout(() => {
					uni.hideLoading()
				}, 3000)
			},
			// 单选
			radioGroupChange(item) {
				if (!this.isFirstClick) {
					this.isSelect = item.option; // 添加用户选项
					if (item.is_correct == 1) { // 选对
						this.correctTotal += 1;
						item["selected"] = this.correctImg;
						item.noSelect = item["selected"];
						// 添加到弹出层
						this.topicTotal[this.page - 1].isErr = 2;
						// this.nextTopic();//下一题
					} else { // 选错
						this.errorTotal += 1
						item["errorImg"] = this.errorImg;
						item.noSelect = item["errorImg"];
						// 添加到弹出层
						this.topicTotal[this.page - 1].isErr = 3;
						// 找出正确答案
						for (let s of this.topicInfo.options) {
							// console.log(55,s);
							if (s.is_correct == 1) {
								s["selected"] = this.correctImg;
								s.noSelect = s["selected"];
							}
						}
						// 添加错误选项
						let obj = {
							type: this.topicType,
							question_id: this.topicInfo.id,
							question_option_ids: [item.id]
						}
					}
					this.isFirstClick = true;
				} else {
					return
				}
			},

			// 多选
			checkGroupChange(item) {
				if (this.isSelect.indexOf(item.option) == -1) {
					this.isSelect += item.option + '、'; // 添加用户选项
				} else {
					this.isSelect
				};
				if (item.is_correct == 1) { // 选对
					// this.correctTotal += 1;
					item["selected"] = this.correctImg;
					item.noSelect = item["selected"];
					// 添加到弹出层
					// this.topicTotal[this.page - 1].isErr = 2;
					// this.nextTopic();//下一题
				} else { // 选错
					this.errorTotal += 1;
					this.isError = true;
					item["errorImg"] = this.errorImg;
					item.noSelect = item["errorImg"];
					// 添加到弹出层
					this.topicTotal[this.page - 1].isErr = 3;
					// 找出正确答案
					for (let s of this.topicInfo.options) {
						// console.log(55,s);
						if (s.is_correct == 1) {
							s["selected"] = this.correctImg;
							s.noSelect = s["selected"];
						}
					}
					// 添加错误选项
					let obj = {
						type: this.topicType,
						question_id: this.topicInfo.id,
						question_option_ids: [item.id]
					}
				}
				this.isFirstClick = true;
			},
			// payCourse购买课程
			payCourse() {
				uni.navigateTo({
					url: ''
				})
			},
			// 重做
			redoTopic() {
				this.isSelect = ''
				// console.log(99,this.topicInfo);
				for (let s of this.topicInfo.options) {
					s["noSelect"] = this.noSelect;
				}
				this.isFirstClick = false;
				// item["noSelect"] = this.noSelect;
			},
			// 语音播报
			playVoice() {
				// let u = new SpeechSynthesisUtterance();
				let str = this.topicInfo.title
				// for (let s of this.topicInfo.options) {
				// 	str += s.option + '、' + s.content + ';'
				// }
				this.Audio.autoplay = true
				this.Audio.src = 'https://api.oick.cn/txt/apiz.php?text=' + str + '&spd=5';
				this.Audio.play()
				this.Audio.onEnded(() => {})
			},
			// 上一题
			backTopic() {
				// 多选
				if ((this.isSelect == this.isCorrect) && (this.topicInfo.type == 2) && this.isSelect != '') {
					this.correctTotal += 1;
					this.topicTotal[this.page - 1].isErr = 2;
				}
				if ((this.isSelect != this.isCorrect) && (this.topicInfo.type == 2) && this.isSelect != '') {
					this.topicTotal[this.page - 1].isErr = 3;
					// this.errorTotal += 1;
				}
				// 单休、判断
				if ((this.isSelect == this.isCorrect) && (this.topicInfo.type == 1 || this.topicInfo.type == 3) && this
					.isSelect != '') {
					this.correctTotal += 1;
					this.topicTotal[this.page - 1].isErr = 2;
				}
				if ((this.isSelect != this.isCorrect) && (this.topicInfo.type == 1 || this.topicInfo.type == 3) && this
					.isSelect != '') {
					this.topicTotal[this.page - 1].isErr = 3;
					// this.errorTotal += 1;
				}
				if (this.page == 1) {
					toast('已是第一题')
					return;
				} else {
					this.isFirstClick = false;
					this.isSelect = ''
					this.page -= 1;
					this.isError = false;
				}
			},
			// 下一题
			nextTopic() {
				// 多选
				if (((this.isSelect + '、') == this.isCorrect) && (this.topicInfo.type == 2) && this.isSelect != '') {
					this.correctTotal += 1;
					this.topicTotal[this.page - 1].isErr = 2;
				}
				if (((this.isSelect + '、') != this.isCorrect) && (this.topicInfo.type == 2) && this.isSelect != '') {
					this.topicTotal[this.page - 1].isErr = 3;
					// this.errorTotal += 1;
				}
				// 单休、判断
				if (((this.isSelect + '、') == this.isCorrect) && (this.topicInfo.type == 1 || this.topicInfo.type == 3) &&
					this.isSelect != '') {
					this.correctTotal += 1;
					this.topicTotal[this.page - 1].isErr = 2;
				}
				if (((this.isSelect + '、') != this.isCorrect) && (this.topicInfo.type == 1 || this.topicInfo.type == 3) &&
					this.isSelect != '') {
					this.topicTotal[this.page - 1].isErr = 3;
					// this.errorTotal += 1;
				}
				if (this.page < this.topicTotal.length) {
					this.isFirstClick = false;
					this.isSelect = '';
					this.isError = false;
					this.page += 1;
				} else {
					toast('已是最后一题')
				}
			},
			// 跳转到某题
			goTopic(count) {
				this.page = count;
				this.topicShow = false;
			},
			// 取消收藏
			cancelCollect(item) {
				let obj = {
					type: this.topicType,
					question_id: item.id
				}
			},
			// 全部错题
			getAllwrong() {
				let that = this
				getAllwrong({page:that.page,limit: 1,subject:this.subject}).then(res => {
					if(that.isrequest){
						let total = res.data.total;
						for (let i = 1; i <= total; i++) {
							let o = {
								isErr: 1,
								subIndex: i
							}
							that.topicTotal.push(o)
						}
						that.isrequest = false;
					}
					// 取数组的第一个
					that.topicInfo = res.data.list[0].question;
					// 添加正确选项
					that.isCorrect = ''
					that.topicInfo.options.map(item => {
						item["noSelect"] = that.noSelect;
						if (item.is_correct == 1) {
							that.isCorrect += item.option + '、';
							// that.nowSelect = item.option;
						}
					})
					that.topicInfo = that.topicInfo;
				})
			},
			// 错题类型全部题目
			getTypewrong(id) {
				let that = this
				getTypewrong(id,{page:that.page,limit: 1,subject:this.subject}).then(res => {
					if(that.isrequest){
						let total = res.data.total;
						for (let i = 1; i <= total; i++) {
							let o = {
								isErr: 1,
								subIndex: i
							}
							that.topicTotal.push(o)
						}
						that.isrequest = false;
					}
					// 取数组的第一个
					that.topicInfo = res.data.list[0].question;
					// 添加正确选项
					that.isCorrect = ''
					that.topicInfo.options.map(item => {
						item["noSelect"] = that.noSelect;
						if (item.is_correct == 1) {
							that.isCorrect += item.option + '、';
							// that.nowSelect = item.option;
						}
					})
					that.topicInfo = that.topicInfo;
				})
			},
			// 全部收藏
			getAllCollection() {
				let that = this
				getAllCollection({page:that.page,limit: 1,subject:this.subject}).then(res => {
					if(that.isrequest){
						let total = res.data.total;
						for (let i = 1; i <= total; i++) {
							let o = {
								isErr: 1,
								subIndex: i
							}
							that.topicTotal.push(o)
						}
						that.isrequest = false;
					}
					// 取数组的第一个
					that.topicInfo = res.data.list[0].question;
					// 添加正确选项
					that.isCorrect = ''
					that.topicInfo.options.map(item => {
						item["noSelect"] = that.noSelect;
						if (item.is_correct == 1) {
							that.isCorrect += item.option + '、';
							// that.nowSelect = item.option;
						}
					})
					that.topicInfo = that.topicInfo;
				})
			},
			// 收藏类型全部题目
			getTypeCollection(id) {
				let that = this
				getTypeCollection(id,{subject:this.subject}).then(res => {
					if(that.isrequest){
						let total = res.data.total;
						for (let i = 1; i <= total; i++) {
							let o = {
								isErr: 1,
								subIndex: i
							}
							that.topicTotal.push(o)
						}
						that.isrequest = false;
					}
					// 取数组的第一个
					that.topicInfo = res.data.list[0].question;
					// 添加正确选项
					that.isCorrect = ''
					that.topicInfo.options.map(item => {
						item["noSelect"] = that.noSelect;
						if (item.is_correct == 1) {
							that.isCorrect += item.option + '、';
							// that.nowSelect = item.option;
						}
					})
					that.topicInfo = that.topicInfo;
				})
			},
		}
	}
</script>

<style lang="scss">
	.notdata-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #B2B3B8;
		font-size: 28rpx;
		height: 60vh;
		justify-content: center;

		>image {
			width: 410rpx;
			height: 240rpx;
		}
	}

	.practice-content {
		padding: 0 0 200rpx;
	}

	.practice-box {
		// width: 95%;
		margin: 20rpx auto;
		padding: 30rpx;
		background-color: #fff;

		.stem-box {
			font-size: 22rpx;

			.stem-type {
				padding: 5rpx 10rpx;
				border-radius: 6rpx;
				color: #fff;
				background: linear-gradient(180deg, #66CCAD, #2AC092);
			}

			.stem-text {
				margin: 0 20rpx;
				font-size: 34rpx;
				line-height: 2;
			}

			.aloud-box {
				background-color: #D7F5EC;
				color: #2AC092;
				padding: 5rpx 10rpx;
				border-radius: 6rpx;
				border: 1rpx solid #8AE6CA;
				margin-right: 20upx;
			}
		}

		.stem-select {
			margin: 0 0 10rpx 0;

			.select-item {
				padding: 30rpx 0;
				display: flex;
				align-items: center;
				font-size: 32rpx;

				>image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 15rpx;
				}
			}
		}

		.answer-box {
			background-color: #F5F5F5;
			border-radius: 10rpx;
			padding: 20rpx;
			font-size: 34rpx;

			>text {
				margin-right: 30rpx;
			}

			.right {
				color: #2AC092;
			}

			.you-select {
				color: #FF6D6A;
			}
		}
	}

	.skill-explain {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;

		>view {
			flex: 1;
		}

		.skill-title {
			text-align: center;
			font-size: 40rpx;
			margin: 20rpx 0;
		}

		.skill-subtitle {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			>image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.explain-box {
			padding: 30rpx;
			border: 1rpx solid #E6E6E6;
			border-radius: 10rpx;
			line-height: 2;
		}
	}

	.fun-box {
		position: fixed;
		bottom: 50rpx;
	
		background-color: #fff;
		box-shadow: 0px 3rpx 20rpx 0px rgba(51, 51, 51, 0.1);
		border-radius: 48rpx;
		width: 96%;
		right: 2%;
		padding: 20rpx;
		font-size: 30rpx;
	}
	.funbox{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.explain{
		display: flex;
		justify-content: space-around;
		margin-bottom: 20upx;
		>view{
			border: 1px solid #2AC092;
			border-radius: 30rpx;
			padding: 15rpx 30rpx;
			color: #2AC092;
			background-color: transparent;
			// margin-right: 20rpx;
		}
	}

	.fun-box1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		font-size: 30rpx;
		border: 1rpx solid #E6E6E6;
	}

	.fun-subbox {
		display: flex;
	}

	.collect {
		display: flex;
		align-items: center;
		background: linear-gradient(180deg, #FFE3C4, #FFA07F, #FFC37F, #FFA23B);
		border-radius: 28rpx;
		padding: 10rpx 15rpx;
		width: max-content;
		margin-right: 20rpx;
		color: #fff;

		>image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.current-topic {
		display: flex;
		align-items: center;

		>image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}

	.up-topic {
		border: 1px solid #2AC092;
		border-radius: 30rpx;
		padding: 15rpx 30rpx;
		color: #2AC092;
		background-color: transparent;
		margin-right: 20rpx;
	}

	.down-topic {
		border: 1px solid #2AC092;
		border-radius: 30rpx;
		padding: 15rpx 30rpx;
		color: #fff;
		background: linear-gradient(180deg, #66CCAD, #2AC092);

	}

	.up {
		color: #000;
		margin-right: 20rpx;
		display: flex;
		padding: 0 20rpx;
		align-items: center;

		>image {
			margin-right: 10rpx;
			width: 36rpx;
			height: 36rpx;
		}
	}

	.topic-code {
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx;
		justify-content: space-between;

		.code-item {
			width: 15%;
			padding: 32rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.correct {
			background-color: #DEFCF3;
			color: #2AC092;
		}

		.error {
			background-color: #FFE1E0;
			color: #FF6D6A;
		}

		.default {
			border: 1upx #D1D1D1 solid;
			color: #999;
			background-color: #fff;
		}

		.current {
			border: 1upx #2AC092 solid;
			color: #999;
			background-color: #fff;
		}
	}

	.tips-box {
		display: flex;
		flex-direction: column;
		height: 100%;

		.tips-text {
			flex: 3;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			color: #333333;
			font-size: 28rpx;
			padding: 20rpx 0;

			>image {
				width: 80rpx;
				height: 80rpx;
			}

			.text {
				margin: 30rpx 0;
			}

			.num {

				>text {
					font-size: 48rpx;
					color: #2AC092;
				}
			}
		}

		.btn-box {
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: space-around;
			font-size: 32rpx;

			>view {
				height: 100%;
				border: 0.5px solid #E6E6E6;
				flex: 1;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.green {
				color: #2AC092;
			}
		}
	}
</style>